<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6" v-for="stat in statsData" :key="stat.title">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: stat.color }">
              <el-icon :size="24">
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-title">{{ stat.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>访问趋势</span>
              <el-button-group>
                <el-button size="small" :type="chartType === 'day' ? 'primary' : ''" @click="chartType = 'day'">日</el-button>
                <el-button size="small" :type="chartType === 'week' ? 'primary' : ''" @click="chartType = 'week'">周</el-button>
                <el-button size="small" :type="chartType === 'month' ? 'primary' : ''" @click="chartType = 'month'">月</el-button>
              </el-button-group>
            </div>
          </template>
          <div class="chart-container">
            <v-chart :option="visitTrendOption" style="height: 300px;" />
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户分布</span>
            </div>
          </template>
          <div class="chart-container">
            <v-chart :option="userDistributionOption" style="height: 300px;" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-row :gutter="20" class="table-row">
      <el-col :span="24">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
              <el-button type="primary" size="small">查看更多</el-button>
            </div>
          </template>
          <el-table :data="activityData" style="width: 100%">
            <el-table-column prop="user" label="用户" width="120" />
            <el-table-column prop="action" label="操作" width="150" />
            <el-table-column prop="resource" label="资源" />
            <el-table-column prop="ip" label="IP地址" width="120" />
            <el-table-column prop="time" label="时间" width="180" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === '成功' ? 'success' : 'danger'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册ECharts组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 图表类型
const chartType = ref('day')

// 统计数据
const statsData = reactive([
  {
    title: '总用户数',
    value: '12,345',
    icon: 'User',
    color: '#409eff'
  },
  {
    title: '今日访问',
    value: '1,234',
    icon: 'View',
    color: '#67c23a'
  },
  {
    title: '在线用户',
    value: '89',
    icon: 'Connection',
    color: '#e6a23c'
  },
  {
    title: '系统负载',
    value: '45%',
    icon: 'Monitor',
    color: '#f56c6c'
  }
])

// 访问趋势图表配置
const visitTrendOption = reactive({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['访问量', '用户数']
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '访问量',
      type: 'line',
      data: [120, 200, 150, 80, 70, 110, 130],
      smooth: true,
      itemStyle: {
        color: '#409eff'
      }
    },
    {
      name: '用户数',
      type: 'line',
      data: [60, 100, 80, 40, 35, 55, 65],
      smooth: true,
      itemStyle: {
        color: '#67c23a'
      }
    }
  ]
})

// 用户分布图表配置
const userDistributionOption = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '用户分布',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '管理员' },
        { value: 735, name: '普通用户' },
        { value: 580, name: '访客' },
        { value: 484, name: 'VIP用户' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 活动数据
const activityData = reactive([
  {
    user: 'admin',
    action: '登录系统',
    resource: '系统管理',
    ip: '192.168.1.1',
    time: '2024-01-27 10:30:25',
    status: '成功'
  },
  {
    user: 'user001',
    action: '查看用户列表',
    resource: '用户管理',
    ip: '192.168.1.2',
    time: '2024-01-27 10:25:15',
    status: '成功'
  },
  {
    user: 'user002',
    action: '修改密码',
    resource: '个人中心',
    ip: '192.168.1.3',
    time: '2024-01-27 10:20:10',
    status: '失败'
  },
  {
    user: 'user003',
    action: '导出数据',
    resource: '数据管理',
    ip: '192.168.1.4',
    time: '2024-01-27 10:15:05',
    status: '成功'
  }
])

onMounted(() => {
  // 模拟数据加载
  // eslint-disable-next-line no-console
  console.log('Dashboard loaded')
})
</script>

<style lang="scss" scoped>
.dashboard {
  .stats-row {
    margin-bottom: 20px;
  }

  .stat-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
  }

  .stat-content {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .stat-info {
    flex: 1;
  }

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 4px;
  }

  .stat-title {
    font-size: 14px;
    color: #909399;
  }

  .chart-row {
    margin-bottom: 20px;
  }

  .chart-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .table-row {
    .table-card {
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
  }

  .chart-container {
    width: 100%;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard {
    .stats-row {
      .el-col {
        margin-bottom: 16px;
      }
    }
    
    .chart-row {
      .el-col {
        margin-bottom: 16px;
      }
    }
  }
}
</style>